<template>
  <div class="group-level">
    <div class="level">
      <div class="title">等级:</div>
      <div class="desc">
        <span class="level0" v-if="user.level0 && user.level0.name">{{ user.level0.name }}</span>
<!--        <span class="group-level0" v-if="user.groupLevel0 && user.groupLevel0.name">({{ user.groupLevel0.name }})</span>-->
        <span class="group-level0" v-if="user.groupLevel0 && user.groupLevel0.name">( VIP{{ user.groupLevel0.id }} )</span>
        <span class="group-level0" v-else>( 还没有VIP等级 )</span>
      </div>
      <div class="text" v-if="+num > -1 && user.level < 202">
        直推<span>{{ +num }}</span>人成为大团长
      </div>
      <ul class="vip">
        <li
          v-for="(item, index) in vip"
          :key="index"
        >
          <span class="name">VIP{{item.id}}:</span>
          <span class="amount">需要完成业绩(本人+直推): ￥{{ +item.amount }} </span>
<!--          <span class="amount">平分比率: {{ +item.ratio }}%</span>-->
        </li>
      </ul>
      <div class="performance" v-if="performance > -1">
        您目前总业绩为: <span>￥{{ + performance }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'Level',
  data() {
    return {
      user: {},
      num: -1,
      vip: [],
      performance: -1
    }
  },
  methods: {
    fetchData() {
      api.My.getLevel().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.user = data.user
        this.num = data.num
        this.vip = data.vip
        this.performance = data.performance
      })
    }
  },
  created () {
    this.fetchData()
  }
}
</script>

<style scoped lang="stylus">
.group-level
  background $background_color
  //padding 10px 0
  padding-bottom 10px
  .level
    background white
    padding 15px
    border-radius 10px
    .title
      text-align left
      font-weight 700
    .desc
      height 50px
      line-height 50px
      .level0
        font-size 16px
      .group-level0
        font-size 18px
        color red
        margin-left 10px
    .text
      text-align left
      padding-left 10px
      height 25px
      line-height 25px
      span
        color red
    .vip
      text-align left
      padding-left 10px
      li
        height 18px
        line-height 18px
    .performance
      height 30px
      line-height 30px
      text-align left
      padding-left 10px
      span
        color red
        font-weight 700
</style>
